<template>
  <div @click="linkto" class="CardBook">
    <div class="picUrl">
      <img :src="novelDataArr.picUrl || novelitem.picUrl" alt="" />
    </div>
    <div class="right">
      <div>
        <h4 class="exceed1">{{ novelDataArr.name || novelitem.name }}</h4>
        <p class="p_flex">{{ novelDataArr.author || novelitem.author }} </p>
      </div>
      <p class="exceed2">{{ novelDataArr.evaluate || novelitem.evaluate }}</p>
      <div>
        <van-icon name="eye" size="16" color="#b550ff" />
        <span>{{
          novelitem.browse || novelitem.browse > 1000
          ? novelitem.browse || novelitem.browse / 1000 + "k"
          : novelitem.browse || novelitem.browse
        }} </span>
        <!-- <slot></slot> -->
        <p style="font-size: 0.5rem;"> {{ novelitem.speedOfProgress }} </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      novelDataArr: []
    }
  },
  props: {
    novelitem: {
      type: Object,
      default: () => {
        return {
          picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1034539330/90",
          brief:
            "The Road to the RichesAra never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, ",
          name: "斗破苍穹",
          author: "天蚕土豆",
          view: "240",
          id: "13",
          lv: 4.5,
          evaluate:
            "Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, she came back to life in a different body and a different world. In a world that is far from modern, slavery and murder are very commonplace. Reviving in a different body did not make her happy, she was faced with two choices between life and death again, became one of the entertainer slaves at a hunting event held once a month by the superior sons of the kingdom, including the crown prince.",
        };
      },
    },
  },

  methods: {
    linkto() {
      if (this.$props.novelitem.sort) {
        this.$router.push({
          name: "reader",
          params: {
            id: this.$props.novelitem.id,
            sort: this.$props.novelitem.sort,
          },
        });
      } else {
        this.$router.push({
          name: "novel",
          query: { id: this.$props.novelitem.id, sort: 1 },
        });
      }
    },
    async created() {
      console.log("得到的对象", this.$props.novelitem);
      let result = await getnovelinfo({ id: 1, sort: 1 })
      console.log('数据', result.data);
      this.novelDataArr = result.data
    }
  },
};
</script>

<style lang="scss" scoped>
.CardBook {
  font-size: 0.45rem;
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;

  .picUrl {
    width: 95px;
    height: 120px;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);

    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    flex: 1;

    .p_flex {
      display: flex;
      align-items: center;

      span {
        width: 3.5px;
        height: 3.5px;
        background-color: rgb(112, 112, 112);
        border-radius: 50%;
        margin: 0 10px;
      }
    }
  }

  p {
    margin-top: 3px;
    color: rgb(112, 112, 112);
    font-size: 0.4rem;
  }
}

.exceed2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.exceed1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
